<template>
  <div class="customer-service-container">
    <!-- 顶部状态栏 -->
    <div class="status-bar">
      <span class="status-text">12:00</span>
      <div class="status-icons">
        <span class="icon">📶</span>
        <span class="icon">🔋</span>
      </div>
    </div>

    <!-- 头部导航 -->
    <div class="service-header">
      <button class="back-btn" @click="$router.back()">←</button>
      <h2 class="header-title">客服中心</h2>
      <div class="header-right">
        <button class="header-btn coze-btn" @click="$router.push('/coze-chat')" title="Coze 对话">
          <span class="btn-icon">🤖</span>
          <span class="btn-text">Coze对话</span>
        </button>
        <button class="header-btn history-btn" @click="showConversationList = true" title="历史对话">
          <span class="btn-icon">📋</span>
          <span class="btn-text">历史</span>
        </button>
        <button class="header-btn new-btn" @click="createNewConversation" title="新建对话">
          <span class="btn-icon">➕</span>
          <span class="btn-text">新建</span>
        </button>
        <button class="header-btn consult-btn" @click="$router.push('/online-consultation')" title="在线咨询">
          <span class="btn-icon">💬</span>
          <span class="btn-text">在线咨询</span>
        </button>
        <button class="header-btn service-btn" @click="$router.push('/human-service')" title="人工客服">
          <span class="btn-icon">👤</span>
          <span class="btn-text">人工客服</span>
        </button>
      </div>
    </div>

    <!-- 对话列表侧边栏 -->
    <div v-if="showConversationList" class="conversation-sidebar" @click.self="showConversationList = false">
      <div class="sidebar-content" @click.stop>
        <div class="sidebar-header">
          <h3>历史对话</h3>
          <button class="close-btn" @click="showConversationList = false">✕</button>
        </div>
        <div class="conversation-list">
          <div 
            v-for="conv in conversationList" 
            :key="conv.conversation_id"
            :class="['conversation-item', { active: conv.conversation_id === currentConversationId }]"
            @click="switchConversation(conv.conversation_id)"
          >
            <div class="conv-title">{{ conv.title }}</div>
            <div class="conv-meta">
              <span class="conv-time">{{ formatTime(conv.updated_at) }}</span>
              <span class="conv-count">{{ conv.message_count }} 条消息</span>
            </div>
            <div v-if="conv.last_message" class="conv-preview">{{ conv.last_message }}</div>
          </div>
          <div v-if="conversationList.length === 0" class="empty-conversations">
            暂无历史对话
          </div>
        </div>
      </div>
    </div>

    <!-- 客服聊天区域 -->
    <div class="chat-container">
      <div class="chat-messages" ref="messagesContainer">
        <!-- 欢迎消息（只在没有历史消息时显示） -->
        <div v-if="messages.length === 0" class="message-item bot-message">
          <div class="avatar bot-avatar">🤖</div>
          <div class="message-content">
            <div class="message-bubble bot-bubble">
              <p>您好！我是客服小助手，有什么可以帮助您的吗？</p>
            </div>
            <div class="message-time">{{ getCurrentTime() }}</div>
          </div>
        </div>

        <!-- 用户消息列表 -->
        <div 
          v-for="(message, index) in messages" 
          :key="index"
          :class="['message-item', message.type === 'user' ? 'user-message' : 'bot-message']"
        >
          <div v-if="message.type === 'bot'" class="avatar bot-avatar">🤖</div>
          <div class="message-content">
            <div :class="['message-bubble', message.type === 'user' ? 'user-bubble' : 'bot-bubble']">
              <p>{{ message.content }}</p>
            </div>
            <div class="message-time">{{ message.time }}</div>
          </div>
          <div v-if="message.type === 'user'" class="avatar user-avatar">👤</div>
        </div>

        <!-- 加载中提示 -->
        <div v-if="loading" class="message-item bot-message">
          <div class="avatar bot-avatar">🤖</div>
          <div class="message-content">
            <div class="message-bubble bot-bubble typing">
              <span></span><span></span><span></span>
            </div>
          </div>
        </div>
      </div>

      <!-- 快捷问题 -->
      <div v-if="messages.length === 0" class="quick-questions">
        <div class="quick-title">常见问题</div>
        <div class="quick-items">
          <div 
            v-for="question in quickQuestions" 
            :key="question.id"
            class="quick-item"
            @click="sendQuickQuestion(question.text)"
          >
            {{ question.text }}
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="input-area">
        <input 
          v-model="inputText"
          type="text"
          placeholder="输入您的问题..."
          class="message-input"
          @keyup.enter="sendMessage"
        />
        <button class="send-btn" @click="sendMessage" :disabled="!inputText.trim()">
          <span v-if="!loading">发送</span>
          <span v-else>...</span>
        </button>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bottom-nav">
      <div class="nav-item" @click="$router.push('/feed')">
        <span class="nav-icon">🏠</span>
        <span class="nav-label">首页</span>
      </div>
      <div class="nav-item">
        <span class="nav-icon">🛒</span>
        <span class="nav-label">购物</span>
      </div>
      <div class="nav-item highlight" @click="$router.push('/publish')">
        <span class="nav-icon-blue">+</span>
        <span class="nav-label">发布</span>
      </div>
      <div class="nav-item">
        <span class="nav-icon">💬</span>
        <span class="nav-label">消息</span>
      </div>
      <div class="nav-item active">
        <span class="nav-icon">🛟</span>
        <span class="nav-label">客服</span>
      </div>
      <div class="nav-item" @click="$router.push('/profile')">
        <span class="nav-icon">👤</span>
        <span class="nav-label">我的</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import apiClient from '@/api/axios'

const router = useRouter()
const messages = ref([])
const inputText = ref('')
const loading = ref(false)
const messagesContainer = ref(null)
const currentConversationId = ref(null) // 当前对话ID
const showConversationList = ref(false) // 是否显示对话列表
const conversationList = ref([]) // 对话列表

const quickQuestions = ref([
  { id: 1, text: '如何发布内容？' },
  { id: 2, text: '如何修改个人信息？' },
  { id: 3, text: '如何实名认证？' },
  { id: 4, text: '忘记密码怎么办？' },
  { id: 5, text: '如何联系客服？' },
  { id: 6, text: '账号异常怎么办？' }
])

// 获取当前时间
const getCurrentTime = () => {
  const now = new Date()
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  return `${hours}:${minutes}`
}

/**
 * 发送消息（使用多轮对话系统）
 * 
 * 功能：
 * - 调用 /api/chat/send 接口发送消息
 * - 自动创建对话（如果还没有对话）
 * - 支持 RAG 检索增强生成
 * - 保存对话历史
 */
const sendMessage = async () => {
  // 校验：消息不能为空，且当前没有正在发送的消息
  if (!inputText.value.trim() || loading.value) return

  // ============ 构建用户消息对象 ============
  const userMessage = {
    type: 'user',
    content: inputText.value.trim(),
    time: getCurrentTime()
  }

  // 添加到消息列表（立即显示，提升用户体验）
  messages.value.push(userMessage)
  const question = inputText.value.trim()
  inputText.value = ''
  loading.value = true

  // 滚动到底部
  await nextTick()
  scrollToBottom()

  // ============ 调用多轮对话系统 API ============
  try {
    const response = await apiClient.post('/chat/send', {
      message: question,
      conversation_id: currentConversationId.value, // 如果已有对话，使用现有对话ID
      use_rag: true // 启用 RAG 检索增强
    })

    if (response.data.success) {
      // 更新当前对话ID（如果是新创建的对话）
      if (response.data.conversation_id && !currentConversationId.value) {
        currentConversationId.value = response.data.conversation_id
        // 保存到 localStorage
        localStorage.setItem('current_conversation_id', currentConversationId.value)
      }

      // 添加助手回复
      const botMessage = {
        type: 'bot',
        content: response.data.assistant_reply,
        time: getCurrentTime(),
        used_rag: response.data.used_rag // 标记是否使用了 RAG
      }
      messages.value.push(botMessage)
      
      console.log('[对话] 消息发送成功，使用RAG:', response.data.used_rag)
      // 刷新对话列表
      await refreshAfterSend()
    } else {
      // 发送失败，显示错误消息
      const botMessage = {
        type: 'bot',
        content: response.data.error || '发送失败，请稍后重试',
        time: getCurrentTime()
      }
      messages.value.push(botMessage)
    }
    
    loading.value = false
    await nextTick()
    scrollToBottom()

  } catch (error) {
    console.error('[对话] 发送消息失败:', error)
    const errorMsg = error.response?.data?.detail || error.message || '网络错误，请稍后重试'
    
    const botMessage = {
      type: 'bot',
      content: `抱歉，发送失败：${errorMsg}`,
      time: getCurrentTime()
    }
    messages.value.push(botMessage)
    loading.value = false
    await nextTick()
    scrollToBottom()
  }
}

// 发送快捷问题
const sendQuickQuestion = (text) => {
  inputText.value = text
  sendMessage()
}

/**
 * 初始化对话（创建新对话或加载现有对话）
 */
const initConversation = async () => {
  try {
    // 加载对话列表
    await loadConversationList()
    
    // 尝试从 localStorage 获取上次的对话ID
    const savedConversationId = localStorage.getItem('current_conversation_id')
    
    if (savedConversationId) {
      // 尝试加载历史对话
      try {
        const historyResponse = await apiClient.get(`/chat/conversations/${savedConversationId}/history`)
        if (historyResponse.data && historyResponse.data.messages && historyResponse.data.messages.length > 0) {
          // 转换历史消息格式（过滤掉欢迎消息，因为模板中已经有）
          const historyMessages = historyResponse.data.messages.map(msg => ({
            type: msg.role === 'user' ? 'user' : 'bot',
            content: msg.content,
            time: msg.timestamp ? new Date(msg.timestamp).toLocaleTimeString('zh-CN', { 
              hour: '2-digit', 
              minute: '2-digit' 
            }) : getCurrentTime(),
            used_rag: msg.used_rag
          }))
          // 如果有历史消息，替换欢迎消息
          if (historyMessages.length > 0) {
            messages.value = historyMessages
          }
          currentConversationId.value = savedConversationId
          console.log('[对话] 已加载历史对话，消息数:', messages.value.length)
          await nextTick()
          scrollToBottom()
          return
        }
      } catch (e) {
        console.log('[对话] 加载历史对话失败，创建新对话:', e.message)
      }
    }
    
    // 创建新对话
    await createNewConversation()
    
  } catch (error) {
    console.error('[对话] 初始化对话失败:', error)
    // 即使失败，也允许用户继续使用
  }
}

/**
 * 创建新对话
 */
const createNewConversation = async () => {
  try {
    loading.value = true
    const createResponse = await apiClient.post('/chat/conversations', {
      title: '客服咨询'
    })
    
    if (createResponse.data && createResponse.data.conversation_id) {
      currentConversationId.value = createResponse.data.conversation_id
      localStorage.setItem('current_conversation_id', currentConversationId.value)
      console.log('[对话] 已创建新对话:', currentConversationId.value)
      
      // 清空消息列表（只保留欢迎消息）
      messages.value = []
      
      // 刷新对话列表
      await loadConversationList()
      
      await nextTick()
      scrollToBottom()
    }
  } catch (error) {
    console.error('[对话] 创建新对话失败:', error)
    alert('创建新对话失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

/**
 * 加载对话列表
 */
const loadConversationList = async () => {
  try {
    const response = await apiClient.get('/chat/conversations')
    if (response.data) {
      conversationList.value = response.data
      console.log('[对话] 已加载对话列表，共', conversationList.value.length, '个对话')
    }
  } catch (error) {
    console.error('[对话] 加载对话列表失败:', error)
  }
}

/**
 * 切换对话
 */
const switchConversation = async (conversationId) => {
  try {
    loading.value = true
    
    // 切换到指定对话
    await apiClient.put(`/chat/conversations/${conversationId}/switch`)
    
    // 加载对话历史
    const historyResponse = await apiClient.get(`/chat/conversations/${conversationId}/history`)
    
    if (historyResponse.data && historyResponse.data.messages) {
      // 转换历史消息格式
      messages.value = historyResponse.data.messages.map(msg => ({
        type: msg.role === 'user' ? 'user' : 'bot',
        content: msg.content,
        time: msg.timestamp ? new Date(msg.timestamp).toLocaleTimeString('zh-CN', { 
          hour: '2-digit', 
          minute: '2-digit' 
        }) : getCurrentTime(),
        used_rag: msg.used_rag
      }))
      currentConversationId.value = conversationId
      localStorage.setItem('current_conversation_id', conversationId)
      
      // 关闭侧边栏
      showConversationList.value = false
      
      // 刷新对话列表
      await loadConversationList()
      
      await nextTick()
      scrollToBottom()
    }
  } catch (error) {
    console.error('[对话] 切换对话失败:', error)
    alert('切换对话失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

/**
 * 格式化时间
 */
const formatTime = (timestamp) => {
  if (!timestamp) return ''
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now - date
  
  if (diff < 60000) return '刚刚'
  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
  
  return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
}

// 自动回复逻辑（如果后端API未实现，使用此逻辑）
const getAutoReply = (question) => {
  const lowerQuestion = question.toLowerCase()
  
  if (lowerQuestion.includes('发布') || lowerQuestion.includes('内容')) {
    return '发布内容很简单！点击底部导航栏的"+"按钮，就可以发布您的笔记、图片或视频了。'
  } else if (lowerQuestion.includes('修改') || lowerQuestion.includes('个人信息') || lowerQuestion.includes('资料')) {
    return '修改个人信息：点击"我的"→"编辑资料"，就可以修改昵称、头像、简介等信息了。'
  } else if (lowerQuestion.includes('实名') || lowerQuestion.includes('认证')) {
    return '实名认证：在"我的"页面点击"实名认证"按钮，按照提示上传身份证照片即可完成认证。'
  } else if (lowerQuestion.includes('密码') || lowerQuestion.includes('忘记')) {
    return '忘记密码：可以在登录页面点击"忘记密码"进行重置，或联系客服协助处理。'
  } else if (lowerQuestion.includes('联系') || lowerQuestion.includes('客服')) {
    return '您已经联系到客服了！有什么问题可以直接问我，我会尽力帮助您解决问题。'
  } else if (lowerQuestion.includes('账号') || lowerQuestion.includes('异常')) {
    return '如果账号出现异常，请先尝试退出登录后重新登录。如果问题依然存在，请联系客服处理。'
  } else {
    return '感谢您的咨询！我已经记录您的问题，稍后会有客服人员为您详细解答。您也可以查看帮助中心了解更多信息。'
  }
}

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

// ============ 组件生命周期 ============
onMounted(async () => {
  // 页面加载时：初始化对话，加载历史消息
  scrollToBottom()
  await initConversation() // 初始化对话系统
})

// 发送消息成功后刷新对话列表
const refreshAfterSend = async () => {
  await loadConversationList()
}

</script>

<style scoped>
.customer-service-container {
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  padding-bottom: 70px;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 15px;
  background: white;
  font-size: 12px;
}

.status-icons {
  display: flex;
  gap: 5px;
}

/* 头部导航 */
.service-header {
  background: white;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
}

.back-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
  color: #333;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 240px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 10px;
  border: none;
  border-radius: 18px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.header-btn:active {
  transform: scale(0.95);
}

.consult-btn {
  background: #ff4757;
  color: white;
}

.consult-btn:hover {
  background: #ee5a6f;
  box-shadow: 0 3px 6px rgba(255, 71, 87, 0.3);
}

.service-btn {
  background: #007AFF;
  color: white;
}

.service-btn:hover {
  background: #0056b3;
  box-shadow: 0 3px 6px rgba(0, 122, 255, 0.3);
}

.btn-icon {
  font-size: 13px;
  line-height: 1;
}

.btn-text {
  font-size: 11px;
  line-height: 1;
}

/* 聊天容器 */
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background: #f5f5f5;
}

.message-item {
  display: flex;
  margin-bottom: 15px;
  align-items: flex-start;
  gap: 10px;
}

.user-message {
  flex-direction: row-reverse;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.bot-avatar {
  background: #e3f2fd;
}

.user-avatar {
  background: #007AFF;
}

.message-content {
  max-width: 70%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.user-message .message-content {
  align-items: flex-end;
}

.bot-message .message-content {
  align-items: flex-start;
}

.message-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  word-wrap: break-word;
  line-height: 1.4;
}

.user-bubble {
  background: #007AFF;
  color: white;
  border-bottom-right-radius: 4px;
}

.bot-bubble {
  background: white;
  color: #333;
  border: 1px solid #e0e0e0;
  border-bottom-left-radius: 4px;
}

.message-time {
  font-size: 11px;
  color: #999;
  padding: 0 5px;
}

/* 输入动画 */
.typing {
  display: flex;
  gap: 4px;
  align-items: center;
}

.typing span {
  width: 8px;
  height: 8px;
  background: #999;
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

/* 快捷问题 */
.quick-questions {
  padding: 15px;
  background: white;
  border-top: 1px solid #f0f0f0;
}

.quick-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  font-weight: bold;
}

.quick-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-item {
  padding: 8px 14px;
  background: #f5f5f5;
  border-radius: 20px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #e0e0e0;
}

.quick-item:hover {
  background: #007AFF;
  color: white;
  border-color: #007AFF;
}

/* 输入区域 */
.input-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: white;
  border-top: 1px solid #f0f0f0;
}

.message-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  font-size: 14px;
  outline: none;
}

.message-input:focus {
  border-color: #007AFF;
}

.send-btn {
  padding: 10px 20px;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.send-btn:hover:not(:disabled) {
  background: #0056b3;
}

.send-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid #f0f0f0;
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: #666;
  cursor: pointer;
  position: relative;
  flex: 1;
}

.nav-item.active {
  color: #007AFF;
}

.nav-icon {
  font-size: 18px;
}

.nav-icon-blue {
  width: 36px;
  height: 36px;
  background: #007AFF;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
}

.nav-label {
  font-size: 9px;
}

.highlight .nav-label {
  color: #007AFF;
}

/* WebSocket 连接状态 */
.connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  background: #fff3cd;
  border-bottom: 1px solid #ffc107;
  font-size: 12px;
  color: #856404;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffc107;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 对话列表侧边栏 */
.conversation-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.sidebar-content {
  width: 300px;
  background: white;
  height: 100%;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  animation: slideIn 0.3s;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #333;
}

.conversation-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.conversation-item {
  padding: 15px 20px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background 0.2s;
}

.conversation-item:hover {
  background: #f9f9f9;
}

.conversation-item.active {
  background: #e3f2fd;
  border-left: 3px solid #007AFF;
}

.conv-title {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  font-size: 12px;
  color: #999;
}

.conv-time {
  flex: 1;
}

.conv-count {
  margin-left: 10px;
}

.conv-preview {
  font-size: 13px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
}

.empty-conversations {
  padding: 40px 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

.coze-btn {
  background: #9c27b0;
  color: white;
}

.coze-btn:hover {
  background: #7b1fa2;
  box-shadow: 0 3px 6px rgba(156, 39, 176, 0.3);
}

.history-btn {
  background: #28a745;
  color: white;
}

.history-btn:hover {
  background: #218838;
  box-shadow: 0 3px 6px rgba(40, 167, 69, 0.3);
}

.new-btn {
  background: #ffc107;
  color: #333;
}

.new-btn:hover {
  background: #e0a800;
  box-shadow: 0 3px 6px rgba(255, 193, 7, 0.3);
}
</style>

